<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">随机点名系统</text>
			<text class="subtitle">请选择年级班级开始点名</text>
		</view>

		<!-- 年级选择区域 -->
		<view class="section" v-if="!selectedGrade" :animation="statsAnim">
			<text class="section-title">请选择年级</text>
			<view class="grade-list">
				<view v-for="grade in uniqueGrades" :key="grade.id" class="grade-item" 
					@click="selectGrade(grade.name)">
					<text class="grade-name">{{ grade.name }}年级</text>
					<!-- <text class="grade-sub"></text> -->
					
				</view>
			</view>
		</view>

		<!-- 班级选择区域 -->
		<view class="section" v-else :animation="statsAnim">
			<view class="section-header" @click="backToGrade">
				<uni-icons type="arrowleft" size="24" color="#666"></uni-icons>
				<text class="section-title">{{ selectedGrade }}班级选择</text>
			</view>

			<view class="class-grid">
				<view v-for="classItem in filteredClasses" :key="classItem" class="class-item"
					@click="selectClass(classItem)"
					:class="{'animate-in': showCards}">
					<text class="class-text">{{ formatClassName(classItem) }}</text>
					<!-- <text class="class-text">班</text> -->
					<view class="student-count">
						<uni-icons type="person" size="14" color="#666"></uni-icons>
						<text>{{ classItem.students.length }}人</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import studentsData from '../../students';
	export default {
		data() {
			return {
				studentsData: [],
				selectedGrade: null,
				showCards: false,
				statsAnim: {}
			}
		},
		async created() {
			try {
				this.studentsData = studentsData.studentsData;
				// 创建动画实例
				this.animation = uni.createAnimation({
					duration: 800,
					timingFunction: 'ease',
				});
				// 延迟显示卡片动画
				setTimeout(() => {
					this.showCards = true;
				}, 300);
				// 执行统计卡片动画
				this.startStatsAnimation();
			} catch (error) {
				console.error('加载学生数据失败:', error);
			}
		},

		computed: {
			uniqueGrades() {
				if (!this.studentsData) return []
				const grades = [...new Set(this.studentsData.map(item => item.grade))]
				return grades.map(grade => {
					let id = 7
					if (grade === '初二') id = 8
					if (grade === '初三') id = 9
					return {
						id,
						name: grade
					}
				}).sort((a, b) => a.id - b.id)
			},

			filteredClasses() {
				if (!this.selectedGrade || !this.studentsData.length) {
					console.warn('无法过滤班级: 缺少年级选择或数据为空')
					return []
				}

				const filtered = this.studentsData
					.filter(item => item.grade === this.selectedGrade)
					.map(item => {
						const classNum = item.class.match(/\d+/)?.[0] || item.class
						return {
							class: classNum,
							originalClass: item.class,
							students: item.students
						}
					})
					.sort((a, b) => a.class - b.class)
				return filtered
			}
		},
		methods: {
			selectGrade(gradeName) {
				this.selectedGrade = gradeName;
				uni.vibrateShort();
			},

			backToGrade() {
				this.selectedGrade = null;
				uni.vibrateShort();
			},

			selectClass(className) {
				uni.navigateTo({
					url: `/pages/rollcallStudent/rollcallStudent?grade=${this.selectedGrade}&class=${className.class}`
				});
			},

			formatClassName(classNum) {
				return classNum.class
			},
			
			startStatsAnimation() {
				this.animation.opacity(1).translateY(0).step()
				this.statsAnim = this.animation.export()
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		min-height: 100vh;
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 79, 10, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(38, 10, 255, 0.1) 0%, transparent 20%);
	}

	.header {
		margin-bottom: 30px;
		text-align: center;
		padding: 15px 0;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: #2c3e50;
		display: block;
		margin-bottom: 5px;
		text-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}

	.subtitle {
		font-size: 16px;
		color: #7f8c8d;
	}

	.section {
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transform: translateY(60rpx);
		opacity: 0;
		position: relative;
		overflow: hidden;
		transition: all 0.2s ease;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 25px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #2c3e50;
		margin-left: 10px;
	}

	.grade-list {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.grade-item {
		padding: 20px;
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	}

	.grade-item:active {
		transform: scale(0.98);
	}

	.grade-name {
		font-size: 18px;
		font-weight: bold;
		color: #2c3e50;
	}

	.grade-sub {
		font-size: 14px;
		color: #7f8c8d;
		margin-left: 5px;
	}

	.grade-icon {
		background: rgba(0, 0, 0, 0.05);
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.class-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.class-item {
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border-radius: 12px;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		opacity: 0;
		transform: translateY(40rpx);
	}

	.class-item.animate-in {
		animation: slideUp 0.6s ease forwards;
	}

	.class-item:active {
		transform: scale(0.98) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.class-number {
		font-size: 36px;
		font-weight: bold;
		color: #2c3e50;
		line-height: 1;
	}

	.class-text {
		font-size: 16px;
		color: #7f8c8d;
		margin-top: 5px;
	}

	.student-count {
		position: absolute;
		bottom: 10px;
		right: 10px;
		background: rgba(0, 0, 0, 0.05);
		padding: 3px 8px;
		border-radius: 10px;
		font-size: 12px;
		color: #666;
		display: flex;
		align-items: center;
	}

	.student-count text {
		margin-left: 3px;
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media (max-width: 480px) {
		.title {
			font-size: 24px;
		}
		
		.subtitle {
			font-size: 14px;
		}
		
		.section {
			padding: 20px;
		}
		
		.grade-item {
			padding: 16px;
		}
		
		.grade-name {
			font-size: 16px;
		}
		
		.class-item {
			height: 90px;
		}
		
		.class-number {
			font-size: 32px;
		}
	}
</style>